<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">

/* root element for tabs  */
ul.tabs {
    list-style:none;
    margin:0 !important;
    padding:0;
    border-bottom:1px solid #666;
    height:30px;
}

/* single tab */
ul.tabs li {
    float:left;
    text-indent:0;
    padding:0;
    margin:0 !important;
    list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a {
    background: url(./img/tabs/blue.png) no-repeat -420px 0;
    font-size:11px;
    display:block;
    height: 30px;
    line-height:30px;
    width: 134px;
    text-align:center;
    text-decoration:none;
    color:#333;
    padding:0px;
    margin:0px;
    position:relative;
    top:1px;
}

ul.tabs a:active {
    outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
    background-position: -420px -31px;
    color:#fff;
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    background-position: -420px -62px;
    cursor:default !important;
    color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */
.panes .pane {
    display:none;
}        	
        
        </style>
<style type="text/css">
	div.wrap {
  width:650px;
  margin-bottom:40px;
  }

  .wrap .pane  {
  background:#fff url(./img/gradient/h150.png) repeat-x 0 20px;
  display:none;
  padding:20px;
  border:1px solid #999;
  border-top:0;
  font-size:14px;
  font-size:18px;
  color:#456;

  _background-image:none;
  }

  .wrap .pane p {
  font-size:38px;
  margin:-10px 0 -20px 0;
  text-align:right;
  color:#578;
  }
</style>
    </head>
    <body>
        <div class="wrap">
            <!-- the tabs -->
            <ul class="tabs">
                <li>
                    <a href="#">Tab 1</a>
                </li>
                <li>
                    <a href="#">Tab 2</a>
                </li>
                <li>
                    <a href="#">Tab 3</a>
                </li>
            </ul>
            <!-- tab "panes" -->
            <div class="pane">
                First tab content.
            </div>
            <div class="pane">
                Second tab content
            </div>
            <div class="pane">
                Third tab content
            </div>
        </div>
        <div class="wrap">
            <!-- the tabs -->
            <ul class="tabs">
                <li>
                    <a href="#">Tab 1</a>
                </li>
                <li>
                    <a href="#">Tab 2</a>
                </li>
                <li>
                    <a href="#">Tab 3</a>
                </li>
            </ul>
            <!-- tab "panes" -->
            <div class="pane">
                <p>
                    #1
                </p>
                <!-- the tabs -->
                <ul class="tabs">
                    <li>
                        <a href="#">Tab 1</a>
                    </li>
                    <li>
                        <a href="#">Tab 2</a>
                    </li>
                    <li>
                        <a href="#">Tab 3</a>
                    </li>
                </ul>
                <!-- tab "panes" -->
                <div class="pane">
                    First tab content.
                </div>
                <div class="pane">
                    Second tab content
                </div>
                <div class="pane">
                    Third tab content
                </div>
            </div>
            <div class="pane">
                <p>
                    #2
                </p>
                <!-- the tabs -->
                <ul class="tabs">
                    <li>
                        <a href="#">Tab 1</a>
                    </li>
                    <li>
                        <a href="#">Tab 2</a>
                    </li>
                    <li>
                        <a href="#">Tab 3</a>
                    </li>
                </ul>
                <!-- tab "panes" -->
                <div class="pane">
                    First tab content.
                </div>
                <div class="pane">
                    Second tab content
                </div>
                <div class="pane">
                    Third tab content
                </div>
            </div>
            <div class="pane">
                <p>
                    #3
                </p>
                <!-- the tabs -->
                <ul class="tabs">
                    <li>
                        <a href="#">Tab 1</a>
                    </li>
                    <li>
                        <a href="#">Tab 2</a>
                    </li>
                    <li>
                        <a href="#">Tab 3</a>
                    </li>
                </ul>
                <!-- tab "panes" -->
                <div class="pane">
                    First tab content.
                </div>
                <div class="pane">
                    Second tab content
                </div>
                <div class="pane">
                    Third tab content
                </div>
            </div>
        </div>
        <script type="text/javascript">
  // perform JavaScript after the document is scriptable.
  $(function() {
      $("ul.tabs").tabs("> .pane");
    });        	
        
        </script>
    </body>
</html>
